<template>
  <div class="login">
    <div class="idnum">
      <span>账号：</span>
      <i class='iconfont icon-zhanghaoshezhi'></i>
      <input type="text"
             placeholder="请输入账号"
             v-model="username">
    </div>
    <div class="password">
      <span>密码：</span>
      <i class="iconfont icon-221yonghu_mima_yuechi"></i>
      <input type="password"
             placeholder="请输入密码"
             v-model="password">
    </div>
    <div class="check">
      <span>验证码：</span>
      <i class="iconfont icon-yanzhengma"></i>
      <input type="text"
             placeholder="请输入验证码"
             v-model="code">
    </div>
    <div class="yzm"
         @click="refreshCode()">
      <Sldentify :identifyCode="identifyCode"></Sldentify>
    </div>

    <div class="btn">
      <button class="btn1"
              @click="login">登录</button>
    </div>

    <router-link to="/regist"><span>前往注册账号...>></span></router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Sldentify from '@/components/Sldentify.vue';
import { Dialog } from 'vant';

export default {
  name: "Mine",
  data: function () {
    return {
      username: '',
      password: '',
      identifyCode: "",
      identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",//随便打的
      code: "",
    }
  },
  components: {
    Sldentify,
    [Dialog.Component.name]: Dialog.Component,
  },
  mounted () {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    refreshCode () {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    randomNum (min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode (data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)]
      }
    },
    login () {
      const url = 'http://localhost:8081/login';
      var params = new URLSearchParams();
      params.append('username', this.username);
      params.append('password', this.password);
      if (this.code == "") {
        // alert('请输入验证码！')
        Dialog.alert({
          message: '请输入验证码',
        }).then(() => {
          // on close
        });
      } else if (this.identifyCode != this.code) {
        this.code = '';
        this.refreshCode();
        // alert('请输入正确验证码');
        Dialog.alert({
          message: '请输入正确验证码',
        }).then(() => {
          // on close
        });
        return;
      } else if (this.identifyCode == this.code) {
        this.$axios({
          method: "post",
          url: url,
          data: params,
        }).then(res => {
          // console.log(res);
          if (res.data.code == 200) {
            // alert(res.data.msg);
            Dialog.alert({
              message: res.data.msg,
            }).then(() => {
              // on close
            });
            // console.log(res.data);
            localStorage.setItem('uid', res.data.result[0].id);
            localStorage.setItem('username', res.data.result[0].username);
            localStorage.setItem('code', res.data.code);
            this.$cookie.set('token', res.data.to, {
              // expires: 1 / (24 * 6),
              path: '/'
            })
            this.$router.push({ name: 'Mine' });
          } else if (res.data.code == 400) {
            // alert(res.data.msg);
            Dialog.alert({
              message: res.data.msg,
            }).then(() => {
              // on close
            });
          } else if (res.data.code == 404) {
            // alert(res.data.msg);
            Dialog.alert({
              message: res.data.msg,
            }).then(() => {
              // on close
            });
            this.$router.push({ name: 'Regist' });
          }
        }).catch(err => console.log(err));
      }
    }
  },
}
</script>

<style lang="less">
.login {
  height: 667px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f2f2f2;
  span {
    font-size: 20px;
  }
  input {
    width: 260px;
    height: 50px;
    outline: none;
    border: 1px solid #aaff;
    border-radius: 5px;
    padding: 25px;
    box-sizing: border-box;
    font-size: 16px;
  }
  .iconfont {
    font-size: 20px;
    color: #3190e8;
    position: absolute;
    left: 65px;
    top: 15px;
  }
  .idnum {
    margin: 50px 0 20px;
    position: relative;
  }
  .password {
    margin-bottom: 20px;
    position: relative;
  }
  .btn {
    margin-bottom: 20px;
    .btn1 {
      height: 50px;
      width: 150px;
      font-size: 16px;
      color: white;
      border: 1px solid #aaff;
      border-radius: 5px;
      background-color: #3190e8;
    }
  }

  .check {
    margin-bottom: 20px;
    position: relative;
    span {
      font-size: 16px;
    }
  }
}
</style>